<template>
  <div class="klk">
     <header class="toubu">
          <div class="_toubu">
             <router-link tag="span" to="/Index" class="iconfont icon-zyojiantou"></router-link>
             <span class="iconfont icon-gouwuche"></span>
          </div>
          <section class="neirong">
              <div class="nei-left">
                  <img src="https://fuss10.elemecdn.com/5/6d/0cd73b38fbdf9abef398ef56c320bjpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/" alt="">
              </div>
              <div class="nei-right">
                  <h1>杨铭宇黄焖鸡（友谊医院店）</h1>
                  <div class="zi">
                    <p>蜂鸟专送 <span>/</span> </p>
                    <p>37分钟送达 <span>/</span> </p>
                    <p>配送费￥6</p>
                  </div>
                  <div class="guanggao">
                     <span>公告：</span>
                     <p>本店属于全国连锁快餐店</p>
                  </div>
                 
              </div>
          </section>
          <section class="xiamian">
              <p><span>首</span>新用户下单立减17元(不与其它活动同享)</p>
              <p>4个活动</p>
          </section>
       </header>
       <nav class="dao">
           <ul>
               <li>商品</li>
               <li>评价</li>
               <li>店铺</li>
           </ul>
       </nav>
  </div>
</template>
<script>
</script>
<style scoped lang="less">
.px2rem(@name, @px) {
  @{name}: @px / 75 * 1rem;
}
.klk {
  font-family: "楷体";
  .toubu {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background: Olive;
    font-family: "微软雅黑";
    ._toubu {
      width: 95%;
      .px2rem(height,80);
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        .px2rem(font-size,60);
        color: #fff;
      }
    }
    .neirong {
      width: 100%;
      display: flex;
      .nei-left {
        width: 30%;
        .px2rem(height,180);
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          .px2rem(width,140);
          .px2rem(height,140);
        }
      }
      .nei-right {
        width: 70%;
        .px2rem(height,180);
        h1 {
          .px2rem(font-size,40);
          font-weight: bold;
          color: #fff;
        }
        .zi {
          width: 100%;
          .px2rem(height,60);
          display: flex;
          p {
            .px2rem(font-size,28);
            color: #fff;
            line-height: 1.8;
          }
        }
        .guanggao {
          width: 100%;
          .px2rem(height,60);
          display: flex;
          .px2rem(font-size,28);
          color: #fff;
          span {
            .px2rem(width,85);
          }
          p {
            flex: 1;
          }
        }
      }
    }
    .xiamian {
      width: 100%;
      .px2rem(height,70);
      display: flex;
      justify-content: space-around;
      p {
        .px2rem(font-size,29);
        color: #fff;
        line-height: 1.9;
        span {
          background: #339900;
        }
      }
    }
  }
  .dao {
    width: 100%;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #ccc;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 100;
    ul {
      width: 70%;
      list-style: none;
      display: flex;
      justify-content: space-between;
      li {
        width: 15%;
        .px2rem(height,80);
        .px2rem(font-size,36);
        text-align: center;
        line-height: 2;
        font-weight: bold;
      }
      li:first-child {
        color: #0033ff;
        border-bottom: 3px solid #0033ff;
      }
    }
  }
}
</style>
